<template>
    <div>
        <van-nav-bar title="购物车" left-text="" left-arrow @click-left="$router.back()">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>

        <!-- 访问模块中的state需要后面加模块名称 -->
        <!-- $store.state.cart.goods -->
        <div v-if="goods.length">
            <div v-for="good in goods" :key="good.id" class="item">
                <div class="col-10">
                    <van-checkbox @change="$store.dispatch('updateCart', good)" v-model="good.sel"
                        checked-color="#f70"></van-checkbox>
                </div>
                <div class="col-30">
                    <img :src="good.img_url" width="80%" />
                </div>
                <div class="col-50">
                    <h4>{{ good.name }}</h4>
                    <p>售价：{{ good.price }}</p>
                    <van-stepper @change="$store.dispatch('updateCart', good)" v-model="good.num" min="1"
                        :max="good.multi_buy_limit.first" />
                </div>
                <!-- <div class="col-10" @click="$store.dispatch('delCart',good.id)"> -->
                <div class="col-10" @click="delCart(good.id)">
                    <van-icon name="delete-o" />
                </div>
            </div>
        </div>
        <van-empty description="购物车空空" v-else>
             <van-button round 
             style="width:120px"
             @click="$router.push('/')"
             type="danger" 
             class="bottom-button">
                去购买
             </van-button>
        </van-empty>

        <!-- <p>{{ userInfo.name }} | {{ userInfo.score }}</p> -->
        <!-- 默认访问模块中的getters不需要带模块名称 -->
        <!-- <p>总数量：{{ $store.getters.totalNum }}</p>
        <p>总数量(简写)：{{ totalNum }}</p>
        <p>总价格：{{ $store.getters.totalPrice }}</p>
        <p>总价格(简写)：{{ totalPrice }}</p> -->
        <van-submit-bar button-text="去结算" class="submitBar">
            <template #default>
                <div style="display:flex;">
                    <div>
                        <p>共{{ totalNum }}件，金额：</p>
                        <p style="color:#f70;font-size:24px">{{ totalPrice * 100 }} 元</p>
                    </div>
                    <div>
                        继续购物
                    </div>
                </div>
            </template>
        </van-submit-bar>
    </div>
</template>
<script>
// 导入state的映射简写方法 mapState 从vuex
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
    /*
    beforeRouteEnter(to,from,next){
        console.log(" beforeRouteEnter",to,from,)
        // 如果用户登录了，就进入购物车
        // 没有登录就跳转到登录页面
        if(localStorage.getItem("token")){
            next(true)
        }else{
            alert("请先登录，再进入购物车")
            // 跳转到登录页面带查询参数redirect 值是/cart
            next("/login?redirect=/cart")
        }
    },
    // 当路由将要离开时执行的回调函数
    beforeRouteLeave(to,from,next){
        // to 离开到那个页面
        // from 从哪个页面离开
        // next 下一步操作 next(true) 离开 next（false）不离开 next("/login") 离开到登录页面
        console.log(to,from);
        // 一旦写了导航守卫 next一定要执行
        // next(true);
        var result = window.confirm("您购买的商品是本月最低优惠，您确定要离开吗");
        if(result){
            next(true)
        }else{
            next(false);
        }
    },*/
    computed: {
        // 待模块的映射方法
        ...mapState({
            "goods": state => state.cart.goods
        }),
        // 不带模块的state映射方法
        ...mapState(["userInfo"]),
        // getters的简写
        ...mapGetters(["totalNum", "totalPrice"])
    },
    methods: {
        // vuex中actons转换为组件的delCart
        ...mapActions(["delCart"])
    }
}
</script>
<style lang="scss" scoped>
.col-10 {
     flex-basis: 10%;
     width: 10%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .col-30 {
     flex-basis: 30%;
     width: 30%;
 }

 .col-50 {
     flex-basis: 50%;
     width: 50%;
 }

 .item {
     display: flex;
     margin-bottom: .2rem;
 }
</style>
<style>
.van-nav-bar .van-icon {
    color: #777;
    font-size: 18px;
}

.van-submit-bar__bar {
    justify-content: space-between;
}
</style>